<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 100px;
        height: 100px;
        background: url('upload.png')
    }

    #file {
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    .pic {
        width: 100px;
        height: 100px;
    }

    .pic img {
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <div id="box">
        <input type="file" name="" id="file" multiple="">
    </div>
    <script src="jquery.js"></script>
    <script>
    var body = $("body")
    var file = $("#file");
    file.on('change', function() {
        var files = this.files;
        var length = files.length;
        $.each(files, function(k, v) {
            var div = $("<div></div>");
            var img = $("<img>");
            div.addClass('pic');
            var fr = new FileReader();

            fr.onload = function() {
                img.attr('src', this.result);
                div.append(img);
                body.append(div)
            }
            fr.readAsDataURL(v)

        })
    })
    </script>
</body>

</html>